<template>
    <div class="login">
        <div class="login-bottom">
            <div class="content">
                <div class="logo">

                    <el-image :src="src"></el-image>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-input prefix-icon="iconfont icon-user" v-model="form.name" placeholder="请输入账号"
                                  class="loginInput" :class="{user: !isshow,nouser: isshow}"
                                  @focus="check" @blur="nockeck"></el-input>
                        <el-input type="password" prefix-icon="iconfont icon-password" v-model="form.password"
                                  placeholder="请输入密码" :class="{passWord: !passwordShow,noPassWord: passwordShow}"
                                  @focus="pwcheck" @blur="pwnockeck"
                                  class="loginInput"></el-input>
                    </el-form>
                    <!--                <div class="check">-->
                    <!--&lt;!&ndash;                    <el-checkbox v-model="checked">记住密码</el-checkbox>&ndash;&gt;-->
                    <!--                    &lt;!&ndash;                    <el-link type="warning">忘记密码?</el-link>&ndash;&gt;-->
                    <!--                </div>-->

                    <div class="mt30 btn">
                        <el-button type="primary" @click="register">登录</el-button>
                    </div>
                </div>

                <!-- <div class="company">
                    <span>© 2019-<span>{{Year}}</span> all rights reserved  杭州数动云科技有限公司</span>
                </div>-->
            </div>
        </div>
    </div>
</template>

<script>

    // import logDetails from './monitoring/logDetails'

    export default {
        data() {
            return {
                src: '../../static/images/logo.png',
                form: {
                    name: '',
                    password: ''
                },
                checked: false,
                isshow: true,
                passwordShow: true,
                Year: ''
            }
        },
        created() {
            let that = this
            document.onkeypress = function (e) {
                var keycode = document.all ? event.keyCode : e.which
                if (keycode === 13) {
                    that.register() // 登录方法名
                    return false
                }
            }
        },
        beforeDestroy() {
            document.onkeypress = null
        },
        mounted() {
            let nowDate = new Date(),
                date = {
                    year: nowDate.getFullYear()
                }
            this.Year = date.year
        },
        methods: {
            check() {
                this.isshow = false
            },
            nockeck() {
                this.isshow = true
            },
            pwcheck() {
                this.passwordShow = false
            },
            pwnockeck() {
                this.passwordShow = true
            },
            register() {
                this.$http.post('/SUser/login', {
                    username: this.form.name,
                    password: this.form.password
                }).then(result => {
                    if (result.success) {
                        // this.$store.state.user.user = {...this.$store.state.user.user}
                        this.$store.state.user.user = result.data.username
                        this.$store.state.user.role = result.data.role
                        // console.log(this.$store.state.user.user)
                        if (result.data.role === '2') {
                            this.$router.push({path: '/index'})
                        } else {
                            this.$router.push({path: '/provide'})
                        }
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .active {
        color: #333;
    }

    .login {
        width: 100%;
        height: 100%;
        min-height: 500px;
        background: #fff url('../../static/images/login1.png') no-repeat left center;
        background-size: contain;

        .login-bottom {
            width: 100%;
            height: 100%;
            background: transparent url('../../static/images/login2.png') no-repeat right bottom;
            background-size: contain;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .content {
            margin-right: 3rem;
            width: 5rem;
            margin-top: -.8rem;

            .logo {
                width: 3.5rem;
                margin: 0 auto;

                .check {
                    height: .5rem;
                    line-height: .5rem;
                }

                .el-image {
                    width: 70%;
                    position: relative;
                    left: .5rem;
                    padding-bottom: .2rem;
                }

                .el-input {
                    margin-bottom: .3rem;
                }

                .el-link {
                    position: absolute;
                    right: 0;
                    font-size: .14rem;
                    /*margin-top: .05rem;*/
                }

                .el-button {
                    width: 100%;
                }
            }

            .company {
                text-align: center;
                margin-top: .5rem;

                span {
                    font-size: .16rem;
                    color: #ccc;
                }
            }
        }

    }
</style>
